import './assets/main.scss'

import { createApp, h, ref } from 'vue'
// 从 pinia 包中引入 createPinia 函数
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

// 全局导入主题样式
// import '@/styles/element/index.scss'
// import ElementPlus from 'element-plus'

// 全局导入黑暗主题
import 'element-plus/theme-chalk/dark/css-vars.css'
import '@/styles/element/dark/css-vars.scss'

// import '@/styles/element/dark/index.scss'
// 只想导入scss？
// import 'element-plus/theme-chalk/src/dark/css-vars.scss'

const apiUrl = import.meta.env.VITE_API_URL
const mode = import.meta.env.MODE

console.log(`API URL: ${apiUrl}`)
console.log(`Mode: ${mode}`)

if (import.meta.env.DEV) {
  console.log('This is a development environment.')
}

if (import.meta.env.PROD) {
  console.log('This is a production environment.')
}

// 创建 Vue应用
const app = createApp(App)

// // 定义全局组件 MyComponentOne 
// const MyComponentOne = {
//     template: ` <button @click="handleClick">点击我</button> `,
//     setup() {
//       const message = ref('你点击了按钮！');
//       const handleClick = () => {
//         alert(message.value)
//       }
//       return {
//         message,
//         handleClick
//       }
//     },
    
// }
// // 注册全局组件  
// app.component('MyComponentOne', MyComponentOne)

// 定义全局组件 MyComponent
// 注册全局组件
app.component('MyComponent3', {
  name: 'MyComponent3',
  render(): any {
    return h('div', [
      h('h1', '通过vue的 h 函数自定义渲染'),
      h('p', '该内容使用setup()中的渲染函数进行渲染。'),
      h('button', { onClick: () => alert('Button clicked !') }, '点我')
    ])
  }
})

app.use(createPinia())
app.use(router)

// 全局使用主题样式
// app.use(ElementPlus)

// 挂载 Vue应用到 DOM
app.mount('#app')
